<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title></title>
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />    
    <style>     
     /* 头部样式 */
     .topbar {background: #3A8B7A; height:50px; }
     #title { color:#FFF;} 
     .swipe {line-height: 50px;margin-right: 10px;color: #FF8400;}
     .back {float: left; padding-right: 30px;}
     .back img {height: 30px;margin-top: 10px;margin-left: 10px;}
     .topbar .title {line-height: 50px; font-size: 22px; position: absolute; left: 50%; -webkit-transform: translateX(-50%);transform: translateX(-50%);}
     .right {float: right; padding-left: 30px;}
     .right img {height: 30px;margin-top: 10px;margin-right: 10px;margin-bottom: 10px;}  
     
     #wrapper {
    position: relative;
    z-index: 1;
    height: 35px;
    width: 90%;
}

#scroller {
    position: absolute;
    z-index: 1;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    width: 200%;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-text-size-adjust: none;
}

#scroller ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    color:#b6b6b6;
}

#scroller li {  
	padding:0px 10px 0px 10px; 
	font-size: 16px;
	color:#b6b6b6; 
	text-align: center;
	line-height:35px;
}
 
#scroller li.nav_active {
    color: #cc4b28;
    font-size: 18px !important;
    border-bottom: 2px solid #cc4b28;
	background: #e7e7e7;
}

nav {
    width: 100%;
    display: -webkit-box;
    background-color: #F6F6F6;
}
    </style>
  </head>
<body>
	<div id="wrap" style="width:100%;overflow:hidden">  
       	<nav>
		    <div id="wrapper" style="height: 37px;">
		        <div id="scroller">
		            <ul>  
		            </ul>
		        </div>
		    </div> 
		    <!--<div class="arrow_down" tapmode=""></div>-->
		</nav>  
	</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>  
<script type="text/javascript" src="../script/alpenlicebe.js"></script>   
<script type="text/javascript" src="../script/zepto.min.js"></script>  
<script type="text/javascript" src="../script/hashes.min.js"></script> 
<script type="text/javascript" src="../script/iscroll.js"></script>    
<script type="text/javascript"> 
    apiready = function(){                   
		goto_getNoDealDataCountFun();
    } 
    
    var myScroll= false;
    function goto_getNoDealDataCountFun(){
		var MD5 = new Hashes.MD5;   
	   	var access_token = Alpe_getLocalStorge("access_token");                     
	   	var admin_id = Alpe_getLocalStorge("admin_id"); 
	   	var sign = MD5.hex(access_token+admin_id+'datas/GetMenu1.0syjqingbao');
	        
	   	var url = Alpe_ApiUrl+'r=datas/GetMenu&access_token='+access_token+'&admin_id='+admin_id 
	   		+'&status=classification'
	   		+'&v=1.0&sign='+sign;	      
		api.ajax({
			url: url,
			method: 'get',
			cache: false,
			timeout: 30,			
			dataType: 'json'
		}, function(ret, err){ 
			if(ret.success == '100'){  
 
				var topMenu=ret.menulist;
				var navHtml = '', frames = [];
				for(var idx in topMenu){  
					var module = topMenu[idx];
					var cateID=module["id"];;
					var cateName=module["title"]; 
					
					var active = idx == 0 ? 'nav_active' : '', frame = {};
			   		navHtml += '<li data-index="' + idx + '" id="' + cateID+ '" class="' + active + '" tapmode="" onclick="goto_openFrameFun(this)">' + cateName + '</li>';
			    	frame.name = 'frame_' + idx;
			  		frame.url = idx == 0 ? 'yq_listCateList.html' : 'yq_listCateList.html';
			   		frame.pageParam = {infoID:cateID,index:idx};
					frames.push(frame);
		   		}  
				$("#scroller").find('ul').html(navHtml);
				/*2015-11-25	ydz	解决超过原定200%宽度滑动后返回或不显示问题	start*/
				var xx=0;	
				$.each($("#scroller").find('li'), function(index, item){
	        		xx+=$(this).width()+10;   
				}); 
				$("#scroller").css('width',xx+'px'); 
				myScroll.refresh();
				/*2015-11-25	ydz	解决超过原定200%宽度滑动后返回或不显示问题	end*/	 
				goto_openFrameGroupFun(frames);  
			}	          
		});   
		myScroll = new IScroll('#wrapper', {
	                eventPassthrough: true,
	                scrollX: true,
	                scrollY: false, 
	                preventDefault: false
	            });  
	}
	/*初始化frame*/
	function goto_openFrameGroupFun(frames) {

		api.openFrameGroup({
            name: 'groupYQDeal',
            scrollEnabled: true,
            rect: {x: 0, y: api.pageParam.winY + $("#wrapper").height()+2, w: 'auto', h: 'auto'},
            index: 0,
            preload:0,/*不预加载*/
            frames: frames
        }, function (ret, err) {
            /*计算滑动位置	s*/ 
        	var wDone=0; 
        	$.each($("#scroller").find('li'), function(index, item){
        		wDone+=$(this).width()+10;  
        		if(ret.index<3){
        			myScroll.scrollTo(0, 0, 20);
        		}else{
	        		if(index==ret.index){  
	        			if(wDone<api.winWidth){
	        				myScroll.scrollTo(0, 0, 20); 
	        			}else{ 
	        				myScroll.scrollTo(-wDone+(api.winWidth/2)+$(this).width(), 0, 20); 
	        			}
	        		} 
        		}
			}); 
            /*计算滑动位置	e*/
            $("#scroller").find('li').removeClass('nav_active').eq(ret.index).addClass('nav_active');
        });
    }
    
	/*打开frame*/
	function goto_openFrameFun(obj) { 
        try {
            api.setFrameGroupIndex({
                name: 'groupYQDeal',
                index: $(obj).data('index'),
                scroll: true
            });
        } catch (e) {
            api.alert({title:'系统提示',msg:'错误信息：'+e}); 
        } 
    }
</script>
</html>